<template>
  <NavBar title="设置" to="/my" />

  <var-cell border>
    <template #icon>头像</template>
    <template #default>
      <var-avatar
        @click="fileRef.click()"
        size="small"
        :round="false"
        :src="info.avatar"
      />
      <input @change="onFileChange" type="file" ref="fileRef" hidden />
    </template>
  </var-cell>
  <var-cell border @click="inputRef.focus()">
    <template #icon>昵称</template>
    <template #default>
      <input ref="inputRef" v-model="info.username" />
    </template>
  </var-cell>
  <var-cell border>
    <template #icon>所在地</template>
    <template #default>
      <span @click="pickerRegion">{{
        !!info.area ? info.area : '北京市-市辖区-东城区'
      }}</span>
    </template>
  </var-cell>
  <var-cell border>
    <template #icon>兴趣偏好</template>
    <template #default>
      <var-menu-select multiple v-model="hobby">
        <span>{{ hobbyLabel || '请选择' }}</span>
        <template #options>
          <var-menu-option
            v-for="(item, index) in hobbyArr"
            :key="index"
            :value="index"
            :label="item"
          />
        </template>
      </var-menu-select>
    </template>
  </var-cell>

  <var-space direction="column" class="bottom">
    <var-button @click="setUserInfo" block type="primary">保存</var-button>
    <var-button @click="logout" text outline block type="danger"
      >退出登录</var-button
    >
  </var-space>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { useInfoStore } from '@/store/info'
import { updateUserInfo, uploadAvatar } from '@/api'
import columns from '@varlet/ui/json/area.json'

const router = useRouter()
const infoStore = useInfoStore()

const info = ref(null)
const hobby = ref([])

info.value = JSON.parse(JSON.stringify(infoStore.userInfo))
hobby.value = info.value.hobby?.split('|').map(Number) || []

const hobbyArr = ['休闲', '人文', '现代', '自然']

const hobbyLabel = computed(() =>
  hobby.value?.map(item => hobbyArr[item]).join('、')
)

const inputRef = ref([])

const tempRegion = ref('北京市-市辖区-东城区')
const pickerRegion = async () => {
  const { state } = await Picker({
    cascade: true,
    columns,
    onChange: values => {
      tempRegion.value = values.join('-')
    }
  })
  if (state === 'confirm') {
    info.value.area = tempRegion.value
  }
}

const fileRef = ref(null)
const onFileChange = async () => {
  const file = fileRef.value.files[0]
  if (!file) return

  const formData = new FormData()
  formData.append('file', file)
  const res = await uploadAvatar(formData)
  info.value.avatar = res[0]
}

const setUserInfo = async () => {
  info.value.hobby = hobby.value.join('|')
  const params = {
    id: info.value.id,
    avatar: info.value.avatar,
    username: info.value.username,
    area: info.value.area,
    hobby: info.value.hobby
  }
  const res = await updateUserInfo(params)
  infoStore.userInfo = info.value
  Snackbar['success'](res)
  router.push('/my')
}

const logout = () => {
  infoStore.logout()
}
</script>

<style scoped lang="scss">
.bottom {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 20px;
}

:deep(.var-cell__content) {
  text-align: right;
}

input {
  text-align: right;
  border: none;
  &:focus {
    outline: none;
  }
}
</style>
